/**
 * Description
 *
 * Creation Date 10/01/2018
 * @author Candy
 */
import React, { Component } from 'react';
import { is, fromJS} from 'immutable';
import { productDetail } from '../../api/index';
import { urlConfig } from  '../../config/tool';

export default class ProductItem extends Component {
	constructor(props) {
		super(props);
		this.state = {
			isFetching: false,
			productData: []
		}
	}

	componentWillMount() {
		console.log('id', this.props.id)
		productDetail(this.props.id).then(res => this.setState({ productData: res.data}))
	}

	componentWillUpdate(nextProps, nextState) {
		if(this.state !== nextState) {
			this.setState({isFetching: true})
		}
	}

	shouldComponentUpdate(nextProps, nextState) {
		if(nextState.isFetching) {
			return false;
		}
		return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state),fromJS(nextState))
	}

	render() {
		console.log(this.state.productData)
		return (
			<div>
				{
					this.state.productData && (
						<div className="product-default-cnt">
							<img src={urlConfig.productBaseUrl + this.state.productData.product_image} alt="" className="image"/>
							<div className="product-default-info">
								<p className="name">{this.state.productData.product_name}</p>
								<p className="price">￥{this.state.productData.price}</p>
							</div>
						</div>
					)
				}
			</div>
		)
	}
}

